<template>
<!-- 粉丝画像 5 30 -->
  <div id="FansPortrait">
    <div v-if="vipRootObj[5][30].owner">
      <div class="mainDiv" v-if="finishFlag">
        <div class="itemDiv">
          <div class="titleBox">
            <img src="@/assets/wang/tdetails/Gender.png" alt="" />
            <span>粉丝性别分布</span>
          </div>
          <div class="fansChartBox">
            <BigPie
              :valueData="genderData"
              v-if="finishFlag && genderData.length != 0"
            />
            <div
              v-if="finishFlag && genderData.length == 0"
              class="noDataNoticewl"
            >
              目前没有可以查看的数据哟~
            </div>
          </div>
        </div>
        <div class="itemDiv">
          <div class="titleBox">
            <img src="@/assets/wang/tdetails/age.png" alt="" />
            <span>粉丝年龄分布</span>
          </div>
          <div class="fansChartBox">
            <BigPie
              :valueData="ageData"
              v-if="finishFlag && ageData.length != 0"
            />
            <div
              v-if="finishFlag && ageData.length == 0"
              class="noDataNoticewl"
            >
              目前没有可以查看的数据哟~
            </div>
          </div>
        </div>
        <div class="itemDiv mapDiv">
          <div class="chartTitle">
            <div class="titleBox">
              <img src="@/assets/wang/tdetails/map.png" alt="" />
              <span>粉丝地域分布</span>
            </div>
            <!-- <radio_group01
            v-model="fansMap"
            class="mr_16"
            :radio_values="['省份', '城市']"
          /> -->
          </div>
          <div class="fansChartBox">
            <!-- 假数据的 -->
            <!-- <ChinaMap01 /> -->
            <!-- 真数据的 -->
            <ChinaMap
              :mapData="provinceRate"
              v-if="finishFlag && provinceRate.length != 0"
              :showVisualMap="false"
            />
            <div
              v-if="finishFlag && showMap && provinceRate.length == 0"
              class="noDataNoticewl"
            >
              目前没有可以查看的数据哟~
            </div>
            <!-- 城市 -->
            <div v-if="!showMap && finishFlag && cityRate.length != 0">
              <table class="theadDiv">
                <thead>
                  <tr>
                    <th>城市</th>
                    <th>占比</th>
                  </tr>
                </thead>
              </table>
              <div class="tbodyDiv">
                <table>
                  <tbody>
                    <tr v-for="(item, index) in cityRate" :key="'m' + index">
                      <td>{{ item.name }}</td>
                      <td>{{ item.value }}%</td>
                    </tr>
                  </tbody>
                </table>
              </div>
            </div>
            <div
              v-if="!showMap && finishFlag && cityRate.length == 0"
              class="noDataNoticewl"
            >
              目前没有可以查看的数据哟~
            </div>
          </div>
        </div>
        <div class="itemDiv">
          <div class="titleBox">
            <img src="@/assets/wang/tdetails/mainStar.png" alt="" />
            <span>粉丝星座分布</span>
          </div>
          <div class="fansChartBox">
            <DetailsBar
              :starXData="starXData"
              :starYData="starYData"
              v-if="finishFlag && starRate.length != 0"
            />
            <div
              v-if="finishFlag && starRate.length == 0"
              class="noDataNoticewl"
            >
              目前没有可以查看的数据哟~
            </div>
          </div>
        </div>
      </div>
      <div
        v-loading="!finishFlag"
        v-if="!finishFlag"
        class="loading"
        element-loading-text="拼命加载中..."
        element-loading-spinner="el-icon-loading"
      ></div>
      <!-- <div class="aysBox2" ref="chartDiv">
      <div class="chartTitle">
        <div class="titleBox">
          <img src="@/assets/wang/tdetails/fans.png" alt="" />
          <span>不同性别粉丝变化趋势</span>
        </div>
        <radio_group01
          v-model="genderTime"
          class="mr_16"
          :radio_values="['近7天', '30天', '90天']"
        />
      </div>
      <Category
        :xData="GenderXdate"
        :y1Data="maledata"
        :y2Data="femaledata"
        name1="男性"
        name2="女性"
        v-if="finish05"
        formatter="2"
      />
      <div
        v-loading="!finish05"
        v-if="!finish05"
        class="loading"
        element-loading-text="拼命加载中..."
        element-loading-spinner="el-icon-loading"
      ></div>
    </div> -->
    </div>
    <!-- 之前的示例图 -->
    <!-- <div v-if="$store.state.is_vip == 0" class="notVipBoxWl">
      <div class="notVipText">
        以下为示例图,该功能为SVIP及以上会员可用,请<span @click="toBuy"
          >升级会员</span
        >使用
      </div>
      <div class="egImgBox">
        <img src="@/assets/wang/live/fanshxEg.png" />
        <img src="@/assets/wang/talentCompare/exampleIcon.png" />
      </div>
    </div> -->
    <!-- 优化后的示例图 -->
    <div v-else class="notVipBoxNewWl">
      <img
        :src="$global.staticUrl + 'image/egImg/FansPortrait.jpg'"
        class="egBgImg"
      />
      <el-dialog
        :visible="true"
        :modal-append-to-body="false"
        :lock-scroll="false"
        :close-on-click-modal="false"
        :close-on-press-escape="false"
        :append-to-body="false"
        :show-close="false"
        custom-class="detailsDialog"
      >
        <div class="dialogEg">
          <payVip routerName="FansPortrait" :lowestVipNum="vipRootObj[5][30].ownerMinLevel" />
        </div>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import ChinaMap from "@/pages/wang/talent/tdetails/component/ChinaMap";
import ChinaMap01 from "./ChinaMap01";
import radio_group01 from "../../../../../component/radio_group01";
import BigPie from "./BigPie";
import Category from "./Category";
import DetailsBar from "./DetailsBar";

export default {
  components: { ChinaMap01, radio_group01, BigPie, Category, DetailsBar,ChinaMap },
  data() {
    return {
      showEg: true,
      genderTime: "近7天",
      fansMap: "省份",
      genderColor: ["#fd7f2c", "#1779ff"],
      ageColor: ["#06f0ab", "#fd7f2c", "#b710fc", "#fcbc10", "#1779ff"],
      // showPie:true
      // 粉丝性别
      genderData: [],
      finishFlag: false,
      // 粉丝年龄
      ageData: [],
      // 地域分布
      provinceRate: [],
      cityRate: [],
      showMap: true,
      // 星座
      starRate: [],
      starXData: [],
      starYData: [],
      // 不同性别粉丝变化趋势
      maledata: [],
      femaledata: [],
      GenderXdate: [],
      finish05: false,
      cancel: null,
      vipRootObj: this.$store.state.userRoot,  //会员权限对象
    };
  },
  computed: {},
  watch: {
    // 地域分布
    fansMap: function (newVal, oldVal) {
      if (newVal == "省份") {
        this.showMap = true;
      } else if (newVal == "城市") {
        this.showMap = false;
      }
    },
    // 不同性别粉丝变化趋势
    genderTime: function (newVal, oldVal) {
      this.finish05 = false;
      this.getChartData();
    },
  },
  created() {
    if (this.vipRootObj[5][30].owner) {
      this.GetFansPortrait();
    }
    // this.getMapData();
    // this.getChartData();
  },
  mounted() {},

  methods: {
    // 查看示例图
    toEgImg() {
      let router = this.$router.resolve({
        path: `/egImg/FansPortrait`,
      });
      window.open(router.href, "_blank");
    },
    // 粉丝性别分布  // 粉丝年龄分布  // 地域分布  // 粉丝星座
    GetFansPortrait() {
      let that = this;
      that.$axios
        .get(
          "/api/author/GetFansPortrait",
          {
            params: {
              authorId: that.$route.params.id,
            },
          },
          {
            cancelToken: new that.$axios.CancelToken(function executor(c) {
              if (that.cancel != null) {
                that.cancel();
              }
              that.cancel = c;
            }),
          }
        )
        .then((res) => {
          if (res.data.code == 0) {
            that.genderData = res.data.data.genderRate;
            that.provinceRate = res.data.data.provinceRate;
            console.log(that.provinceRate);
            that.ageData = res.data.data.ageRate;
            that.cityRate = res.data.data.cityRate;
            that.starXData = [];
            that.starYData = [];
            // 处理年龄
            // res.data.data.ageRate.map((element) => {
            //   that.ageData.push({ name: element.name+'岁', value: element.value });
            // });
            // 处理星座
            that.starRate = res.data.data.starRate;
            if (that.starRate != null) {
              that.starRate.forEach((element) => {
                that.starXData.push(element.name);
                that.starYData.push(element.value);
              });
            }

            that.finishFlag = true;
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    // 不同性别粉丝变化趋势
    getChartData() {
      let that = this;
      let timeType = 1;
      if (that.genderTime == "近7天") {
        timeType = 1;
      } else if (that.genderTime == "30天") {
        timeType = 2;
      } else if (that.genderTime == "90天") {
        timeType = 3;
      }
      that.$axios
        .get("/api/author/GetFansPortrait", {
          params: {
            authorId: that.$route.params.id,
            chartType: 5,
            timeType: timeType,
          },
        })
        .then((res) => {
          if (res.data.code == 0) {
            that.GenderXdate = [];
            that.maledata = res.data.data.datas1;
            that.femaledata = res.data.data.datas2;
            let Xdata = res.data.data.dates;
            Xdata.forEach((element) => {
              that.GenderXdate.push(that.timestamp(element, "M/D"));
              return that.GenderXdate;
            });
            that.finish05 = true;
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    toBuy() {
      let router = this.$router.resolve({
        path: `/talent_main/buy`,
      });
      window.open(router.href, "_blank");
    },
  },
};
</script>
<style lang='less' scoped>
#FansPortrait {
  width: 100%;
  min-height: 100vh;
  .mainDiv {
    margin-top: 55px;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    flex-wrap: wrap;
    .itemDiv {
      overflow: hidden;
      width: 50%;
      .titleBox {
        img {
          margin-left: 0;
        }
      }
    }
    // 城市 table
    .mapDiv {
      .theadDiv {
        margin-top: 27px;
      }
      .tbodyDiv {
        width: 100%;
        max-height: 324px;
        overflow: auto;
      }
      table {
        width: 100%;
        thead {
          width: 100%;
          background-color: #f5f9ff;
          border-radius: 4px;
          tr {
            height: 48px;
            th {
              color: #555555;
              font-size: 14px;
            }
          }
        }
        tbody {
          width: 100%;
          tr {
            height: 52px;
            border-bottom: 1px solid #e5e5e5;
            td {
              font-size: 14px;
              color: #222222;
              width: 50%;
              text-align: center;
            }
          }
        }
      }
    }
    .fansChartBox {
      height: 439px;
    }
  }
  .aysBox2 {
    width: 100%;
    margin-top: 25px;
    .lineChart {
      width: 100%;
      height: 449px;
    }
  }
  .chartTitle {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    .titleBox {
      img {
        margin-left: 0;
      }
    }
  }
}
</style>